<template>
  <div class="booktown">
    <van-sticky>
      <div class="nav-top">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        @focus="onSearch"
        shape="round"
        background="#f5f5f5"
        right-icon="search"
        left-icon=""
      >
        <template #left>
          <div @click="handOff">
            <img v-if="imgType == 1" src="../assets/man.png" alt="" />
            <img v-else-if="imgType == 2" src="../assets/woman.png" alt="" />
          </div>
        </template>
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    </van-sticky>

    <div class="nav-tab">
      <van-sticky :offset-top="44">
        <van-tabs
          v-model="active"
          sticky
          background="#f5f5f5"
          @click="navTo(navi[active].type, navi[active].uuid)"
        >
          <van-tab
            v-for="(v1, index) in navTitle"
            :title="v1.name"
            :key="index"
          >
          </van-tab>
        </van-tabs>
      </van-sticky>
    </div>

    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "booktown",
  data() {
    return {
      value: "",
      imgType: 1,
      active: "",
      navTitle: [],
      navi: [],
    };
  },
  created() {
    this.getNavData();
    // this.getNavIndex();
    // console.log(localStorage.getItem("NavActive"));
    // this.toNav(this.active);
  },
  methods: {
    onSearch() {
      this.$router.push({name:'Search'})
    },
    handOff() {
      if (this.imgType == 2) {
        this.imgType = 1;
        this.getNavData();
      } else {
        this.imgType = 2;
        this.getNavData();
      }
    },
    getNavData(type, uuid) {
      // console.log(this.imgType);
      this.axios({
        method: "get",
        url: `store/navi.json`,
        params: {
          gender: this.imgType,
        },
      })
        .then((result) => {
          // console.log(result);
          let arr = result.data.data.navi;
          arr.forEach((ele) => {
            // /store/show.json?type=recommend&uuid=f2cb32ff209f4010911a77a617add8c4
            let res = {};
            const reg = /[?&][^?&]+=[^?&]+/g;
            const found = ele.url.match(reg);
            if (found) {
              found.forEach((item) => {
                let temp = item.substring(1).split("=");
                let key = temp[0];
                let value = temp[1];
                res[key] = value;
              });
            }
            this.navi.push(res);
            // console.log(res);
          });
          // console.log(this.navi);

          this.navTitle = result.data.data.navi;
          let NavIndex = JSON.parse(localStorage.getItem("NavActive"));
          if (!NavIndex) {
            this.active = 0;
            this.$router.push({ name: this.navi[0].type });
          } else {
            this.active = NavIndex;
            // console.log(NavIndex);
            this.$router.push({ name: this.navi[this.active].type });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getNavIndex() {},

    navTo(type, uuid) {
      // console.log(type);
      // var localChatData = localStorage.getItem("NavActive");

      localStorage.setItem("NavActive", JSON.stringify(this.active));
      // console.log(uuid);
      this.$router.push({
        name: this.navi[this.active].type,
        params: { type: type, uuid: uuid },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.van-search {
  padding: 5px 10px;
}
.van-search__content {
  background-color: white;
  margin-left: 20px;
  // height: 30px;
}
.van-field__control {
  line-height: 30px;
}
// /deep/.van-tabs__nav--line.van-tabs__nav--complete{
//     background-color: #f5f5f5;
// }
.content {
  padding-bottom: 50px;
}
/deep/.van-tab--active {
  font-size: 16px;
}
/deep/.van-tabs__line {
  width: 20px;
}
</style>